{%include file="public/head_common" /%}
<link rel="stylesheet" href="__STATIC__/assets/unpkg/element-ui@2.12.0/lib/theme-chalk/index.css">
<div id="menu" class="sidebar" style="overflow: auto;">
    <div class="main-content">
		<ul class="breadcrumb">
			<li>账号管理</li>
			<li>角色列表</li>
		</ul>
		<div style="margin-bottom:10px;"><el-button type="primary" @click="add()">添加</el-button></div>
		<div >
			 
			<el-table ref="table" :data="data" tooltip-effect="dark" :row-key="idkey" style="width: 100%" border
				>
				<!-- <el-table-column type="selection" width="42" title="全选/反选" /> -->
			
				<el-table-column prop="menu_name" label="菜单名称" min-width="50">
					<template slot-scope="scope">
					{{scope.row.menu_name}}
					</template>
				</el-table-column>
				
				<el-table-column prop="meta_icon" label="图标" min-width="50">
					<template slot-scope="scope">
					<i :class="scope.row.meta_icon" />
					</template>
				</el-table-column>
				<el-table-column prop="menu_url" label="菜单链接" min-width="50">
					<template slot-scope="scope">
					{{scope.row.menu_url}}
					</template>
				</el-table-column>
				<el-table-column prop="path" label="路由地址" min-width="50">
					<template slot-scope="scope">
					{{scope.row.path}}
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序" min-width="50">
					<template slot-scope="scope">
					{{scope.row.sort}}
					</template>
				</el-table-column>


				<el-table-column prop="name" label="路由名称" min-width="50">
					<template slot-scope="scope">
					{{scope.row.name}}
					</template>
				</el-table-column>
				<el-table-column prop="component" label="组件路径" min-width="50">
					<template slot-scope="scope">
					{{scope.row.component}}
					</template>
				</el-table-column>

				<el-table-column prop="menu_type" label="类型" min-width="50">
					<template slot-scope="scope">
						<div>
							<span v-if="scope.row.menu_type == 0">目录</span>
							<span v-else-if="scope.row.menu_type == 1">菜单</span>
							<span v-else-if="scope.row.menu_type == 2">按钮</span>
							<!-- <i v-if="scope.row.menu_type == 0" title="目录" class="el-icon-folder" />
							<i v-else-if="scope.row.menu_type == 1" title="菜单" class="el-icon-s-data" />
							<i v-else="scope.row.menu_type == 2" title="按钮" class="el-icon-open" /> -->
						</div>
					</template>
				</el-table-column>

				

				<el-table-column fixed="right" label="操作" min-width="170">
					<template slot-scope="scope">
						<el-button
							type="text"
							size="small"
							title="添加下级"
							@click="add(scope.row)"
						>添加</el-button>
						<el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
						<el-button type="text" size="small" @click="dele(scope.row)">删除</el-button>
					</template>
				</el-table-column>

			</el-table>
		</div>
	</div>
	<!-- 添加修改 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialog"
      top="6vh"
      :before-close="cancel"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="ref"
        :rules="rules"
        :model="model"
        label-width="100px"
        class="dialog-body"
        :style="{ height: height - 50 + 'px' }"
      >
        <el-form-item label="菜单上级" prop="menu_pid">
          <el-cascader
            v-model="model.menu_pid"
            :options="trees"
            :props="props"
            style="width:100%"
            placeholder="一级菜单"
            clearable
            filterable
          />
        </el-form-item>
        <el-form-item label="菜单类型" prop="menu_type">
			<el-button  title="hidden；隐藏后侧边栏不显示，但仍然可以访问" />
			<el-radio-group v-model="model.menu_type">
				<el-radio :label="0">目录<i  /></el-radio>
				<el-radio :label="1">菜单<i  /></el-radio>
				<el-radio :label="2">按钮<i  /></el-radio>
			</el-radio-group>
          
        </el-form-item>
        <el-form-item v-if="model.menu_type !== 2" label="菜单图标" prop="meta_icon">
          <!-- <e-icon-picker v-model="model.meta_icon" :options="{ ElementUI: true }" :z-index="3500" /> -->
		  <el-input v-model="model.meta_icon" clearable placeholder="meta.title；侧边栏菜单名称">
            <template slot="prepend">
              <el-button icon="el-icon-question" title="meta.title；菜单图标" />
            </template>
            <template slot="append">
              <el-button icon="el-icon-document-copy" title="复制" @click="copy(model.menu_name, $event)" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menu_name">
          <el-input v-model="model.menu_name" clearable placeholder="meta.title；侧边栏菜单名称">
            <template slot="prepend">
              <el-button icon="el-icon-question" title="meta.title；侧边栏菜单名称" />
            </template>
            <template slot="append">
              <el-button icon="el-icon-document-copy" title="复制" @click="copy(model.menu_name, $event)" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="菜单链接" prop="menu_url">
          <el-input v-model="model.menu_url" clearable placeholder="roles；权限标识：应用/控制器/操作；区分大小写">
            <template slot="prepend">
              <el-button icon="el-icon-question" title="roles；权限标识：应用/控制器/操作，区分大小写" />
            </template>
            <template slot="append">
              <el-button icon="el-icon-document-copy" title="复制" @click="copy(model.menu_url, $event)" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="model.menu_type !== 2" label="路由地址" prop="path">
          <el-input v-model="model.path" clearable placeholder="path；路由地址，如：member，一级菜单需在前面加斜杠/；外链为 http 地址">
            <template slot="prepend">
              <el-button icon="el-icon-question" title="path；路由地址，如：member，一级菜单需在前面加斜杠/；外链为 http 地址" />
            </template>
            <template slot="append">
              <el-button icon="el-icon-document-copy" title="复制" @click="copy(model.path, $event)" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="model.menu_type === 1" label="路由名称" prop="name">
          <el-input v-model="model.name" clearable placeholder="name；组件name属性，如：Member，<keep-alive> 用到；外链可随意填写">
            <template slot="prepend">
              <el-button icon="el-icon-question" title="name；组件的name属性，如：Member，<keep-alive> 用到；外链可随意填写" />
            </template>
            <template slot="append">
              <el-button icon="el-icon-document-copy" title="复制" @click="copy(model.name, $event)" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="model.menu_type === 0 || model.menu_type === 1" label="组件地址" prop="component">
          <el-input v-model="model.component" clearable placeholder="component；组件路径，如：member/member，默认在 views 目录下">
            <template slot="prepend">
              <el-button icon="el-icon-question" title="component；组件路径，如：member/member，默认在 views 目录下" />
            </template>
            <template slot="append">
              <el-button icon="el-icon-document-copy" title="复制" @click="copy(model.component, $event)" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="model.menu_type === 1" label="路由参数" prop="meta_query">
          <el-input v-model="model.meta_query" clearable placeholder="meta.query；路由的默认传递参数，如：{ &quot;recycle&quot;: 0 }">
            <template slot="prepend">
              <el-button icon="el-icon-question" title="meta.query；路由的默认传递参数，如：{ &quot;recycle&quot;: 0 }" />
            </template>
            <template slot="append">
              <el-button icon="el-icon-document-copy" title="复制" @click="copy(model.meta_query, $event)" />
            </template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item v-if="model.menu_type !== 2" label="是否隐藏" prop="hidden">
          <el-button icon="el-icon-question" title="hidden；隐藏后侧边栏不显示，但仍然可以访问" />
          <el-radio-group v-model="model.hidden" style="margin-left:10px">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="菜单排序" prop="sort">
          <el-input v-model="model.sort" type="number" placeholder="250">
            <template slot="prepend">
              <el-button icon="el-icon-question" title="降序，数值越大越排在前面" />
            </template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item v-if="model.menu_type === 1" label="快速添加" prop="add">
          <el-button icon="el-icon-question" class="ya-margin-right" title="快速添加，需要输入菜单链接：应用/控制器/操作；区分大小写" />
          <el-checkbox v-model="model.add_info">信息</el-checkbox>
          <el-checkbox v-model="model.add_add">添加</el-checkbox>
          <el-checkbox v-model="model.add_edit">修改</el-checkbox>
          <el-checkbox v-model="model.add_dele">删除</el-checkbox>
          <el-checkbox v-model="model.add_disable">禁用</el-checkbox>
        </el-form-item> -->
        <!-- <el-form-item
          v-if="model.menu_type === 1"
          v-show="model[idkey]"
          label="快速修改"
          prop="edit"
        >
          <el-button icon="el-icon-question" class="ya-margin-right" title="快速修改，需要输入菜单链接：应用/控制器/操作；区分大小写" />
          <el-checkbox v-model="model.edit_info">信息</el-checkbox>
          <el-checkbox v-model="model.edit_add">添加</el-checkbox>
          <el-checkbox v-model="model.edit_edit">修改</el-checkbox>
          <el-checkbox v-model="model.edit_dele">删除</el-checkbox>
          <el-checkbox v-model="model.edit_disable">禁用</el-checkbox>
        </el-form-item> -->
        <!-- <el-form-item v-if="model[idkey]" label="添加时间" prop="create_time">
          <el-input v-model="model.create_time" disabled />
        </el-form-item>
        <el-form-item v-if="model[idkey]" label="修改时间" prop="update_time">
          <el-input v-model="model.update_time" disabled />
        </el-form-item>
        <el-form-item v-if="model.delete_time" label="删除时间" prop="delete_time">
          <el-input v-model="model.delete_time" disabled />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="reset('')">重置</el-button>
        <el-button  @click="cancel">取消</el-button>
        <el-button  type="primary" @click="submit">提交</el-button>
      </div>
    </el-dialog>
</div>
<script src="__STATIC__/assets/unpkg/vue@2.6.10/dist/vue.js"></script>
<script src="__STATIC__/assets/unpkg/element-ui@2.12.0/lib/index.js"></script>
<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#menu',
		data() {
			return {
			name: '菜单',
			height: 720,
			loading: false,
			idkey: 'menu_id',
			exps: [{ exp: 'like', name: '包含' }],
			query: { search_field: 'menu_name', search_exp: 'like', date_field: 'create_time' },
			data: [],
			dialog: false,
			dialogTitle: '',
			model: {
				menu_id: '',
				menu_pid: 0,
				menu_type: 0,
				meta_icon: '',
				menu_name: '',
				menu_url: '',
				path: '',
				name: '',
				component: '',
				meta_query: '',
				hidden: 0,
				sort: 250,
				add_info: false,
				add_add: false,
				add_edit: false,
				add_dele: false,
				add_disable: false,
				edit_info: false,
				edit_add: false,
				edit_edit: false,
				edit_dele: false,
				edit_disable: false
			},
			rules: {
				menu_name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
				path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
				name: [{ required: true, message: '请输入路由名称', trigger: 'blur' }]
			},
			trees: [],
			props: { checkStrictly: true, value: 'menu_id', label: 'menu_name', emitPath: false },
			isExpandAll: false,
			selection: [],
			selectIds: '',
			selectTitle: '选中操作',
			selectDialog: false,
			selectType: '',
			sort: 250,
			sort_incdec: '0',
			menu_pid: 0,
			is_unlogin: 0,
			is_unauth: 0,
			is_unrate: 0,
			is_disable: 0,
			hidden: 0,
			rolePk: 'role_id',
			roleName: '角色',
			roleDialog: false,
			roleDialogTitle: '',
			roleLoad: false,
			roleData: [],
			roleCount: 0,
			roleQuery: { page: 1, limit: 15, search_field: 'role_name', search_exp: 'like', search_value: '' },
			roleSelection: [],
			roleSelectIds: '',
			roleSelectTitle: '选中操作',
			roleSelectDialog: false,
			roleSelectType: '',
			count: ''
			}
		},
		components: {
		},
		created: function(){
			// this.height = 210
    		this.list()
		},
		methods:{
			selectOpen(selectType, selectRow = '') {
				if (selectRow) {
					this.$refs['table'].clearSelection()
					this.$refs['table'].toggleRowSelection(selectRow)
				}
				if (!this.selection.length) {
					this.selectAlert()
				} else {
					this.selectTitle = '选中操作'
					if (selectType === 'remover') {
					this.selectTitle = this.name + '解除角色'
					} else if (selectType === 'editsort') {
					this.selectTitle = this.name + '修改排序'
					} else if (selectType === 'editpid') {
					this.selectTitle = this.name + '修改上级'
					} else if (selectType === 'unlogin') {
					this.selectTitle = this.name + '是否免登'
					} else if (selectType === 'unauth') {
					this.selectTitle = this.name + '是否免权'
					} else if (selectType === 'unrate') {
					this.selectTitle = this.name + '是否免限'
					} else if (selectType === 'hidden') {
					this.selectTitle = this.name + '是否隐藏'
					} else if (selectType === 'disable') {
					this.selectTitle = this.name + '是否禁用'
					} else if (selectType === 'dele') {
					this.selectTitle = this.name + '删除'
					}
					this.selectDialog = true
					this.selectType = selectType
				}
			},
			// 添加修改
			add(row) {
				this.dialog = true
				this.dialogTitle = this.name + '添加'
				this.reset()
				if (row) {
					this.model.menu_pid = row[this.idkey]
				}
			},
			edit(row) {
				this.dialog = true
				this.dialogTitle = this.name + '修改：' + row[this.idkey]
				const id = {}
				id[this.idkey] = row[this.idkey]
				// info(id).then(res => {
				// 	this.reset(res.data)
				// }).catch(() => { })
				$.post("{%:url('account/menuInfo')%}",id,(res) => {
					if(res.code==1){
						this.reset(res.data)
					}else{
						this.$message.error(res.msg)
					}
					
				},'json')
			},
			// 删除
			dele(row) {
				const id = {}
				id[this.idkey] = row[this.idkey]
				$.post("{%:url('account/menuDel')%}",id,(res) => {
					if(res.code==1){
						this.list()
						this.$message.success(res.msg)
					}else{
						this.$message.error(res.msg)
					}
					
				},'json')
			},
			submit() {
				this.$refs['ref'].validate(valid => {
					if (valid) {
					this.loading = true
					if (this.model[this.idkey]) {
						$.post("{%:url('account/menuEdit')%}",this.model,(res) => {
							if(res.code==1){
								this.list()
								this.$message.success(res.msg)
								this.loading = false
								this.dialog = false
							}else{
								this.$message.error(res.msg)
								this.loading = false
							}
						},'json')
					} else {
						
						$.post("{%:url('account/menuAdd')%}",this.model,(res) => {
							if(res.code==1){
								this.list()
								this.$message.success(res.msg)
								this.loading = false
								this.dialog = false
							}else{
								this.$message.error(res.msg)
								this.loading = false
							}
							
						},'json')
					}
					}
				})	
			},
			cancel() {
				this.dialog = false
				this.reset()
			},
			// 重置
			reset(row) {
				if (row) {
					this.model = row
				} else {
					this.model = this.$options.data().model
				}
				if (this.$refs['ref'] !== undefined) {
					this.$refs['ref'].resetFields()
					this.$refs['ref'].clearValidate()
				}
				this.model.add_info = this.model.add_add = this.model.add_edit = this.model.add_dele = this.model.add_disable = false
				this.model.edit_info = this.model.edit_add = this.model.edit_edit = this.model.edit_dele = this.model.edit_disable = false
			},
			// 列表
			list() {
				console.log(54545)
				this.loading = true
				$.post("{%:url('account/menuList')%}",{
				},(res) => {
					if(res.code==1){
						this.data = res.data.list
						this.trees = res.data.tree
						// this.exps = res.data.exps
						this.count = res.data.count
						this.isExpandAll = false
						this.loading = false
					}else{
						that.$message.error(rsp.msg)
						this.loading = false
					}
				},'json')
				// list(this.query).then(res => {
				// 	this.data = res.data.list
				// 	this.trees = res.data.tree
				// 	this.exps = res.data.exps
				// 	this.count = res.data.count
				// 	this.isExpandAll = false
				// 	this.loading = false
				// }).catch(() => {
				// 	this.loading = false
				// })
			},
		}
	});
</script>
	

			